<template>
    <div class="totaldiv">
        <div class="firstdiv">
            <div class="returnimg"><router-link to="/authentication"><img src="../../../static/img/authentication/return@2x.png" alt=""></router-link></div>
            <div class="imgdiv">
               <img :src="'../'+require('../../../static/img/authentication/nameidentify@2x.png')" alt="找不到">
            </div>
            <div class="title"><span>实名认证</span> </div>
        </div>
        <form action="#">
            <div class="seconddiv">
                <p>
                    <span class="lefttitle">身份证号码</span> 
                    <span class="righttitle"><input type="text" class="inputcss" placeholder="440*********5030"></span>
                </p>
                <p>
                    <span class="lefttitle">姓名：</span> 
                    <span class="righttitle"><input type="text" class="inputcss" placeholder="物有所享"></span>               
                </p>
                <p>             
                    <span class="lefttitle">性别</span>
                    <span class="lefttitle">
                        <span>
                            <select v-model="selected" style="margin-top:1rem;">
                                <option v-for="(a,index) in sex" :key="index">{{a.name}}</option>
                            </select>
                        </span> 
                        <span><img class="clickimg" src="../../../static/img/authentication/click@2x.png" alt=""></span> 
                    </span>
                </p>
                <p style="background-color:#EFEFF4;margin-top: 0.5rem">
                    <button class="btnsure" type="submit">确认</button>
                </p>
            </div>
        </form>
    </div>
</template>

<script>
export default {
    data(){
        return {
            selected:'请选择',
            sex:[
                {id:'1',name:'请选择'},
                {id:'2',name:'男'},
                {id:'3',name:'女'},
            ]
        }
    },
}
</script>

<style lang="scss" scoped>
.totaldiv{
    flex-direction: column;
    justify-content: center;
    width: 24rem;
    background-color: #EFEFF4;
    .firstdiv{
        margin-bottom: 0.5rem;
        background-color: #89C997;
        display: flex;
        flex-direction: column;
        text-align: center;
        .returnimg{
            position: absolute;
            img{
                height:25px;
                width:25px;
                margin-top:1rem;
                margin-left: 1.5rem;
            }
        }
        .imgdiv{
            padding-top: 1rem;
            padding-bottom: 1rem;
            img{
                height: 187px;
                width: 220px;
            }
        }
        .title{
            padding-bottom: 0.5rem;
            span{
                font-size: 20px;
                color: #FFFFFF;
            }
        }
    }
    .seconddiv{
        background-color: #EFEFF4;
       p{
           height: 40px;
           display: flex;
           align-items: center;
           justify-content: space-between;
           background-color: #FFFFFF;
           padding-left: 1rem;
           padding-right: 1rem;
           margin-bottom: 0.5rem;
           span{
                display: flex;
                align-items: center;
                justify-content: center;
           }
       }
    }
}
.lefttitle{
    color: #4f4f4f
}
.righttitle{
    color: black;
}
.clickimg{
    width: 6px;
    height: 10px;
}
.inputcss{
    text-align:right;
    border:none;
    margin-top:14px;
    font-size:15px;
    width:12rem
}
.btnsure{
    width: 21rem;
    height: 50px;
    background-color: #3A3B3F;
    color: #FFFFFF;
    margin-top: 1rem;
    margin-left: 0.3rem;
}
</style>
